<%-- 
    Document   : profile
    Created on : Nov 13, 2012, 12:14:23 AM
    Author     : ntfsbk
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="Ultility.Ultility" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Profile</title>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/css/styles.css"/>
<script type="text/javascript" src="<%= request.getContextPath()%>/js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="<%= request.getContextPath()%>/js/profile.js"></script>
</head>

<body>
<!-----------------------HEADER------------------------------------------------->
<div id="top">
    <div class="banner" style="background:url(<%= request.getContextPath()%>/images/bg00.png) repeat-x left">
    	<div class="logo">
        	<img src="<%= request.getContextPath() %>/images/logo1.png" />
        </div>
        <div class="top-tab">
        	<div class="top-tab-inactive">
                <div class="top-tab-txt">
                    <a href="<%= request.getContextPath() %>/myphoto/myPhoto.htm"> My Photos</a>
                </div>
            </div>
        </div>
        <div class="top-tab">
        	<div class="top-tab-inactive">
                <div class="top-tab-txt">
                    <a href="Explore.html"> Explore</a>
                </div>
            </div>
        </div>
        
	<div class="upload">
                    <a href="<%= request.getContextPath() %>/upload/startupload.htm">Upload</a>
        </div>
        
        <div class="search">
            <div class="search-form">
            	<form id="search-form" method="get" action="/lh/view" name="search-form">
			<input id="search" type="text" value="" maxlength="128" size="25" name="q">
	                <input class="search-button" type="submit" value="Search">
                </form>
            </div>
        </div>
    </div>
</div>
<!-----------------------CONTENT------------------------------------------------->
<div style="overflow:hidden; width:1124px; min-height:500px; margin:auto; margin-bottom:40px;">
<div class="info-right">
    <div style="overflow:hidden; float:right; margin-top:30px; border:#CCCCCC 1px solid; border-radius:2px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
        <div align="center" class="avt-profile" style="width:200px; min-height:200px; float:right;">
            <% String thumbFileName=(String)request.getAttribute("thumbFileName");
              if(thumbFileName==null) {%>
              <img align="middle"  src="<%=  request.getContextPath() %>/profile/getThumb.htm?getthumb=defaultAvatar.jpg"  style="margin:3px;"/>
            <%} else{
             String path=request.getContextPath() + "/profile/getThumb.htm?getthumb="+thumbFileName;%>
             <img align="middle" src="<%= path %>" style="margin:3px;"/>
            <%}%>
        </div>
        <div class="edit-avt" role="button" style="display:none;">Change Profile Photo</div>
		<div class="edit-avt" role="button" >Save</div>
	</div>
    
	<div style="overflow:hidden; float:left; width:522px;">
	<div class="basic-header fr">
    	<div>
           	<h2>Basic Info</h2>
        </div>
        
            <div id="formEdit" class="frmEdit" reloadurl="<%= request.getContextPath() %>/profile/profile.htm" >

            <div class="edit-name">
                <div class="label">Username</div>
                <div class="data">${userName}</div>

                <div class="clear line"></div>
            </div>

            <div class="edit-name">
                <div class="label">Email</div>
                <div class="data">${email}</div>

                <div class="clear line"></div>
            </div>

            <div id="genderDiv1" class="edit-name">
                <div class="label">Gender</div>
                <% String gender=(String)request.getAttribute("gender");
                if(gender.equals("F")) {%>
                <div class="data">Female</div>
                <%} else { %>
                <div class="data">Male</div>               
                <%}%>
                <div id="genderEdit"  class="edit-txt">
                    <a href="#">Edit</a>
                </div>
                <div class="clear line"></div>
            </div>

            <div id="genderDiv2" class="form-edit" style="display:none;"    
                 url="<%= request.getContextPath() %>/profile/updateGender.htm">
            	<div class="label">Gender</div>
                <div class="edit-data" >
                    <% if(gender.equals("M")){ %>
                	<label class="radio">
                            <input id="genderM" type="radio" value="M" name="gender" checked> Male
			</label>
			<label class="radio">
				<input id="genderF" type="radio" value="F" name="gender"> Female
			</label>
                        <%} else{ %>
                        <label class="radio">
                            <input id="genderM" type="radio" value="M" name="gender"> Male
			</label>
			<label class="radio">
                            <input id="genderF" type="radio" value="F" name="gender" checked> Female
			</label>
                        <%}%>
                </div>
                <div id="genderSave" class="edit-button button-red">Save</div>
                <div id="genderCancel" class="edit-button">Cancel</div>
                <div class="clear line"></div>
            </div>

            <div id="birthDiv1" class="edit-name">
                <div class="label">Birth Date</div>
                <div class="data">${birthDate}</div>
                <div class="edit-txt">
                    <a id="birthEdit" href="#">Edit</a>
                </div>
            </div>
            
            <div id="birthDiv2" class="form-edit" style="display:none;"
                     url="<%= request.getContextPath() %>/profile/updateBirth.htm">
                <div class="clear line"></div>
            	<div class="label">BirthDay</div>
                <div class="edit-data">
                    <select id="birthMonth" name="birthMonth">
                        <% int month= (Integer)request.getAttribute("month");
                        Ultility ul=new Ultility();
                        for(int i=1;i<=12;++i){                          
                            String monthString=ul.intToStringMonth(i);
                            if(i==month){%>
                                <option value="<%= i %>" selected="selected"  ><%= monthString %></option>
                            <%} else{ %>
                                <option value="<%= i %>"><%= monthString %></option>
                            <%}%>
                        <%}%>
                    </select>
            
                    <select id="birthDay" name="birthDay">
                        <% int day=(Integer)request.getAttribute("day");
                        for(int i=1;i<=31;++i){
                            if(day==i){%>
                                <option value="<%= i %>" selected="selected"><%= i %></option>
                            <%} else{ %>
                                <option value="<%= i %>"><%= i %></option>
                            <%}%>
                        <%}%>
                    </select>
			
                    <select id="birthYear" name="birthYear">
                        <% int year=(Integer)request.getAttribute("year"); 
                        for(int i=2012;i>= 1912;--i){
                            if(year==i){%>
                                <option value="<%= i %>" selected="selected"><%= i %></option>
                            <%} else{ %>
                                <option value="<%= i %>"><%= i %></option>
                            <%}%>
                        <%}%>
                    </select> 
                </div>
                <div id="birthSave" class="edit-button button-red">Save</div>
                <div id="birthCancel" class="edit-button">Cancel</div>
                <div class="clear line"></div>
            </div>
            
        </div>
    </div>
    
    <div class="basic-header fr">
    	<div>
            <h2>Password</h2>
        </div>  
           <div  class="frmEdit">
               <% String passFlag=(String)request.getAttribute("passFlag"); 
                if(passFlag.equals("new")){ %>
            <div id="passDiv1" class="edit-name" >
                <div class="data"><input type="password" value="12345678901234567890" disabled></div>
                <div class="edit-txt">
                    <a id="passEdit" href="#">Edit</a>
                </div>
            </div>
        
            <div id="passDiv2" class="form-edit" style="display:none;">
                <form method="post" >
                <div class="label">Curent:</div>
                <div class="edit-data">
                    <input type="password" value="" name="password" style="width:200px; height:22px; margin-top:-2px;" data-original-title="A good password contains both letters and numbers and is at least 6 characters in length. This makes it harder for someone to guess.">
                </div>
                <br />
                
                <div class="label">New:</div>
                <div class="edit-data">
                    <input type="password" value="" name="new_password" style="width:200px; height:22px; margin-top:-2px;" data-original-title="A good password contains both letters and numbers and is at least 6 characters in length. This makes it harder for someone to guess.">
                </div>
                <br />
                
                <div class="label">Re-type New:</div>
                <div class="edit-data">
                    <input type="password" value="" name="retype_new" style="width:200px; height:22px; margin-top:-2px;" data-original-title="A good password contains both letters and numbers and is at least 6 characters in length. This makes it harder for someone to guess.">
                </div>
                <br />
                <input type="submit" id="passSave" value="Save" class="edit-button button-red">
                <div id="passCancel" class="edit-button">Cancel</div>
                </form>
            </div>
            <%} else{ %>
            <div id="passDiv1" class="edit-name" style="display: none">
                <div class="data"><input type="password" value="12345678901234567890" disabled></div>
                <div class="edit-txt">
                    <a id="passEdit" href="#">Edit</a>
                </div>
            </div>
        
            <div id="passDiv2" class="form-edit">
                <form method="post" >
                <div class="label">Curent:</div>
                <div class="edit-data">
                    <input type="password" value="" name="password" style="width:200px; height:22px; margin-top:-2px;" data-original-title="A good password contains both letters and numbers and is at least 6 characters in length. This makes it harder for someone to guess.">
                </div>
                <br />
                
                <div class="label">New:</div>
                <div class="edit-data">
                    <input type="password" value="" name="new_password" style="width:200px; height:22px; margin-top:-2px;" data-original-title="A good password contains both letters and numbers and is at least 6 characters in length. This makes it harder for someone to guess.">
                </div>
                <br />
                
                <div class="label">Re-type New:</div>
                <div class="edit-data">
                    <input type="password" value="" name="retype_new" style="width:200px; height:22px; margin-top:-2px;" data-original-title="A good password contains both letters and numbers and is at least 6 characters in length. This makes it harder for someone to guess.">
                </div>
                <br />
                <% if(passFlag.equals("wrongPass")){ %>
                     <div class="label">wrong password</div>
                     <%}else if(passFlag.equals("emptyPass")){  %>
                     <div class="label">password is empty</div>
                     <%} else if(passFlag.equals("passnotMatch")) { %>
                     <div class="label">password is not matched</div>
                     <%} else if(passFlag.equals("updatePassSucess")){%>
                      <div class="label">password updated</div>
                     <%} else{%>
                     <div class="label">password update fail</div>
                     <%}%>
                <br />
                <input type="submit" id="passSave" value="Save" class="edit-button button-red">
                <div id="passCancel" class="edit-button">Cancel</div>
                </form>
            </div>
            <%}%>
        </div>
	</div>    
	</div>
</div>

<div class="info-left">
    <div class="seCute">
        <div class="profile-name">
            <a class="nameButton" role="button" href="Profile.html">Hoang Yen</a>
        </div>
        <img src="<%= request.getContextPath() %>/images/SeCute.png" style="float: right; margin-top: 50px;" />
    </div>
</div> 
</div>

<div id="footer">
	<p id="copyright"> Powered by 4nSE, SE K53, Hanoi University of Science and Techonogy.</p>
</div>

</body>
</html>

